<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的购物车</title>
    <!-- 引入jquery -->
    <script type="text/javascript" src="../js/jquery.min.js"></script>

    <!-- 引入 css  -->
    <!-- 引入bootstrap的css -->
    <link  href="../js/bootstrap3/css/bootstrap.css" rel="stylesheet" >
    <!-- 引入bootstrap-treeview的css -->
    <link rel="stylesheet" href="../js/bootstrap-treeview/bootstrap-treeview.min.css">
    <!-- 引入bootstrap-addTabs的css -->
    <link  href="../js/bootStrap-addTabs/bootstrap.addtabs.css" rel="stylesheet" >
    <!-- 引入bootstrap-table的css -->
    <link  href="../js/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" >


    <!-- 引入 js  -->
    <!-- 引入bootstrap的js-->
    <script type="text/javascript" src="../js/bootstrap3/js/bootstrap.js"></script>
    <!-- 引入bootstrap-treeview的js-->
    <script type="text/javascript" src="../js/bootstrap-treeview/bootstrap-treeview.min.js"></script>
    <!-- 引入bootstrap-addTabs的js-->
    <script type="text/javascript" src="../js/bootStrap-addTabs/bootstrap.addtabs.js"></script>
    <!-- 引入bootstrap-table的js-->
    <script type="text/javascript" src="../js/bootstrap-table/bootstrap-table.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
    <!-- 引入bootbox.js -->
    <script type="text/javascript" src="../js/bootstrap-bootbox/bootbox.js"></script>
    <!-- 引入fileinput的js -->
    <script type="text/javascript" src="../js/bootstrap-fileinput/js/fileinput.min.js"></script>
    <!--  引入fileinput的js -->
    <script type="text/javascript" src="../js/bootstrap-fileinput/js/locales/zh.js"></script>
    <script type="text/javascript" src="../js/bootstrap-fileinput/themes/fa/theme.js"></script>


    <style>
        body{ text-align:center}
        #divcss5{margin:0 auto;border:0px solid #000;width:300px;height:100px}
    </style>

</head>

<body>
    <!-- 网页顶部导航信息 -->
    <!--导航条  最上头放置以下内容的黑框-->
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <!-- 容器 以下内容为 顶部信息   -->
        <div class="container-fluid">
            <!-- 此段为窗口小化时用’三‘来代替隐藏所有导航信息 -->
            <button type="button" class="navbar-toggle collapsed"
                    data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
                    aria-expanded="false">
                <span class="sr-only">Toggle navigation</span> <span
                    class="icon-bar"></span> <span class="icon-bar"></span> <span
                    class="icon-bar"></span>
            </button>
            <!-- Brand and toggle get grouped for better mobile display -->

            <!-- 头部信息 -->
            <div class="navbar-header">
                <a class="navbar-brand glyphicon glyphicon-globe"
                   href="javascript:dialogRedis()" id="menu-toggle"> 购物平台 </a>
            </div>
            <!-- 左边 信息 -->
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse"
                 id="bs-example-navbar-collapse-1">

                <ul class="nav navbar-nav">
                    <li class="active "><a href="../page/shopCar"
                                           class="glyphicon glyphicon-shopping-cart">&nbsp我的购物车&nbsp&nbsp <span
                            class="sr-only">(current)</span></a></li>

                    <li><a href="../page/zhuye" class="glyphicon ">&nbsp&nbsp首页&nbsp&nbsp&nbsp&nbsp</a></li>
                    <li><a href="../user/saveCollect" class="glyphicon glyphicon-grain">&nbsp&nbsp收藏夹&nbsp&nbsp&nbsp&nbsp</a></li>


                    <!-- 右边的    导航 按钮样式 -->
                    <ul class="nav navbar-nav navbar-right">

                        <li><a href="../page/tomain"> &nbsp登录</a></li>
                        <li><a href="../lxx/Register">&nbsp免费注册 </a></li>
                        <li><a href="../lxx/zhuxiao">&nbsp&nbsp 注销</a></li>
                    </ul>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>
<br><br>

    <!--提示-->
    <div  id="divcss5" class="alert alert-warning" style="width: 600px;height: 30px">
        <button type="button" class="close" data-dismiss="alert">×</button>
        <strong>温馨提示：</strong> 本平台均为正品，请放心购买，祝您购物愉快.
    </div>
    <br>

    <div  id="divcss5"  style="width: 1000px;">
        <div>
            <ul class="nav navbar-nav navbar-left">

                <img alt="" src="../upload/123.jpg" style="width:150px;height: 80px"/>


                <br><br>
                <h3><font color=#FF00FF><i>我的购物车</i></font></h3>
            </ul>
        </div>
        <!--数据展示-->

        <div  id="data" style="margin:0 auto;border:0px solid #000;" class="alert alert-warning"></div>
            <br>
            <div class="alert alert-info">

                <table>
                    <tr>
                        <td>&nbsp&nbsp&nbsp&nbsp已选商品</td>
                        <td><span id="yixuan"><h4><font  color='red'>0</font></h4></span></td>
                        <td>件</td>
                        <td>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp总计（不含运费）:</td>
                        <td><span id="spsum"><h3><font  color='red'>￥0</font></h3></span> </td>
                        <td>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<button class="btn btn-danger btn-lg" onclick="jieshan()">结算</button></td>
                    </tr>
                    <input type="hidden" id="spsum1">
                </table>
            </div>

    <br><br><br><br><br>
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span12">
                <div class="carousel slide" id="carousel-903621">
                    <ol class="carousel-indicators">
                        <li class="active" data-slide-to="0" data-target="#carousel-903621">
                        </li>
                        <li data-slide-to="1" data-target="#carousel-903621">
                        </li>
                        <li data-slide-to="2" data-target="#carousel-903621">
                        </li>
                    </ol>
                    <div class="carousel-inner">
                        <div class="item active">
                            <img alt="" src="../upload/yundong.jpg" style="width:1000px;height: 400px"/>
                            <div class="carousel-caption">
                                <h4>运动</h4>
                                <p> 生命在于 运动，运动在于 行动，你的生命正在 释放</p>
                            </div>
                        </div>
                        <div class="item">
                            <img alt="" src="../upload/shenghuo.jpg" style="width:1000px;height: 400px"/>
                            <div class="carousel-caption">
                                <h4>生活</h4>
                                <p> 生活 苦辣酸甜各有味道，细细品尝 生活的味道</p>
                            </div>
                        </div>
                        <div class="item">
                            <img alt="" src="../upload/shop.jpg" style="width:1000px;height: 400px"/>
                            <div class="carousel-caption">
                                <h4>买买买</h4>
                                <p>余生很长，请不要错过您喜欢的任何一件</p>
                            </div>
                        </div>
                    </div> <a data-slide="prev" href="#carousel-903621" class="left carousel-control">‹</a> <a data-slide="next" href="#carousel-903621" class="right carousel-control">›</a>
                </div>
            </div>
        </div>
    </div>

    <br><br><br>
    <!--页脚-->
    <div class="footerBotBox">
        <div class="footerBot clearfix">
            <div class="footerBotLeft">
                <p class="footerInfo">
                    <a href="#" target="_blank" rel="nofollow">公司简介<i></i></a> <a href="#" target="_blank" rel="nofollow">管理团队<i></i></a>
                    <a href="#" target="_blank" rel="nofollow">媒体报道<i></i></a> <a href="#" target="_blank" rel="nofollow">联系我们<i></i></a>
                    <a href="#" target="_blank">网站地图<i></i></a> <a href="#" target="_blank">品牌大全<i></i></a>
                </p>
                <p class="copyright">
                    北京直购平台网络科技有限公司&nbsp;&nbsp;©&nbsp;&nbsp;直购平台&nbsp;&nbsp;&nbsp;2011&nbsp;&nbsp;shoppingHappy.com&nbsp;&nbsp;All&nbsp;&nbsp;&nbsp;Rights&nbsp;Reserved&nbsp;&nbsp;&nbsp;<a href="javascript:;" target="_blank" rel="nofollow">京ICP备17043395号</a>&nbsp;&nbsp;&nbsp;京公网安备1101050188221
                </p>
                <p class="footerAddr" style="color: #999; line-height: 22px; padding-top: 5px;">
                    <span>统一社会信用代码&nbsp;&nbsp;91110302306646672B&nbsp;&nbsp;&nbsp;商品流通许可证编号&nbsp;&nbsp;JY11131010328793&nbsp;&nbsp;&nbsp;认证时间201910019&nbsp;&nbsp;&nbsp;</span>
                </p>
                <p class="footerAddr" style="color: #999; line-height: 22px; padding-bottom: 7px;">
                    <span>地址：北京市北京经济技术开发区经海五路58号院8幢4层</span>
                </p>
                <p class="footerPro" style="padding: 8px 0 6px;">购买前请确认物流地址是否正确，保证手机号在用，谢谢</p>
            </div>
        </div>
    </div>
    </div>
</body>
<script>
    //查询    数据展示
    $(function () {
        //创建bootstrapTable
        $("#data").bootstrapTable({
            url: "../zsl/shopping",
            method : 'post',

            // striped : false, // 斑马线效果     默认false
            //classes:'info',
            border:'0px solid transparent',
            //cardView : false, //是否显示详细视图
            // showRefresh : true, //是否显示刷新按钮
            // toolbar : '#tabToolBar', //  工具定义位置
            sidePagination : 'server',
            // toolbar : '#toolbar',
            /*点击复选框行触发事件
            onClickRow : function(row, tr,flied){
                sum();
             },*/

            //点击全选框时触发的操作
            onCheckAll:function(){
                sum11();
            },
            //点击全选框取消选择时触发
            onUncheckAll:function(){
                sum11();
            },

            //点击单选框时触发的操作
            onCheck:function(){
                sum11();
            },
            //点击取消单选框时触发的操作
            onUncheck:function(){
                sum11();
            },

            columns : [
                { field : 'checkbox',checkbox : true

                }, //开启复选框
                {field : 'xx', title : '商品信息', width : 800,height:500,
                    formatter:function(value,row,index){
                        var a="<img src='"+row.productImg+"' width='80' height='80'>";
                        a+="<a href='javascript:xiangqing("+row.id+")'>  "+row.productName+"   </a>";
                        a+="<a href='javascript:xiangqing("+row.id+")'>    "+row.productName+"   "+row.productColor+"</a>";
                        return a;
                    }
                },

                { field : 'productPrice', title : '单价', width : 200,height:500,
                    formatter:function(value,row,index){
                        return "￥"+value;
                    }
                },
                { field : 'x', title : '数量', width : 350 ,height:500,
                    formatter:function(value,row,index){
                        var tr="<button type='button' class=\"btn btn-info\" onclick='jian("+row.id+","+row.productPrice+")'>-</button>"
                        tr +="<input id='co"+row.id+"' onkeyup='kuang("+row.productid+","+row.productPrice+")' size=1 value='1' style='width: 20px'>"
                        tr +="<button type='button' class=\"btn btn-info\" onclick='jia("+row.id+","+row.productPrice+")'>+</button> <br>"
                        tr +="<input type='hidden' id='ku"+row.id+"' size=1 value='"+row.stockNumber+"'><span id='kusp"+row.id+"'></span>";

                        return tr;
                    }
                },
                { field : 'xxx', title : '金额', width : 200,height:500,
                    formatter:function(value,row,index){
                        var  a="<font  color='red'>￥</font>";
                        a+= "<span id='sum"+row.id+"'  >"+row.productPrice * 1+"</span>";  //隐藏的每行总额
                        return  a;
                    }
                },
                { field : 'x', title : '操作', width : 300,height:500,
                    formatter:function(value,row,index){
                        var productname=JSON.stringify(row.productName);
                        var productphoto=JSON.stringify(row.productImg);
                        var  a="<a href='javascript:shanchu("+row.id+")' >删除  </a> <br>";
                            a+="<a href='javascript:shoucang("+row.id+")' >移入我的收藏</a><br>";
                        return  a;
                    }
                }
            ]
        });
    })

    //详情
    xiangqing=function(productid){
        location.href="../ztx/queryone?productid="+productid;

    }

    //删除
    shanchu=function(id){
        $("#shanid").val(id);
        $("#myModalshan").modal('show');
    }
    shanqueding=function(){
        var id=  $("#shanid").val();
        $.ajax({
            url:"../xu1/deleteshopping",
            data:{id:id},
            type:"post",
            success:function(){
                $("#myModalshan").modal('hide');
                $("#formshan")[0].reset();
                $("#data").bootstrapTable("refresh");
            }
        })
    }

    //价格和
    sum11=function(){
        var arr = $('#data').bootstrapTable("getSelections");//获取选中的行
        console.log(arr);
        var money =0;
        var y=0;

        for (var i = 0; i < arr.length; i++) {
            sums =$("#sum"+arr[i].id).html();
            money +=Number(sums);
            y++;
        }
        $("#yixuan").html("<h4><font  color='red'>"+y+"</font></h4>");
        $("#spsum").html("<h3><font  color='red'>￥"+money+"</font></h3>");
        $("#spsum1").val(money);
    }



    //加 价格
    jia=function(id,price){
        var count=Number($("#co"+id).val()); //数量	  //Number 要转为Number格式才行
        var kucun=Number($("#ku"+id).val()); //库存
        if(count >= kucun){

            $("#co"+id).val(kucun);
            $("#kusp"+id).html("<font color='red' >最多只能购买"+kucun+"件</font>");
        }else{

            $("#co"+id).val(count+1);
            $("#kusp"+id).html("");
        }


        //每行总额
        var sum= price*$("#co"+id).val();
        $("#sum"+id).html(sum);
        sum11();
    }

    //减 价格
    jian=function(id,vprice){
        $("#kusp"+id).html("");  //最多购买提示设空

        var count=$("#co"+id).val()<=1?1:$("#co"+id).val()-1;
        $("#co"+id).val(count);
        //每行总额
        var sum= vprice*$("#co"+id).val();
        $("#sum"+id).html(sum);
        sum11();
    }

    //文本框
    kuang=function(id,vprice){
        var count=Number($("#co"+id).val()); //数量	  //Number 要转为Number格式才行
        var kucun=Number($("#ku"+id).val()); //库存
        if(count > kucun){
            $("#co"+id).val(kucun);
            $("#kusp"+id).html("<font color='red' >最多只能购买"+kucun+"件</font>");
        }else  if(count <= 0){
            $("#co"+id).val(1);
        }
        else{
            $("#co"+id).val(count);
            $("#kusp"+id).html("");
        }

        //每行总额
        var sum= vprice*$("#co"+id).val();
        $("#sum"+id).html(sum);
        sum11();

    }

    //结算
    jieshan=function(){
        var arr = $('#data').bootstrapTable("getSelections");//获取选中的行
        console.log(arr);
        if (arr.length <= 0) {
            alert("请选择的要购买的商品");
            return ;
        }
        var productid ="";
        var count="";
        var productprice="";
        for (var i = 0; i < arr.length; i++) {
            productid +=arr[i].id +",";

            count +=$("#co"+arr[i].id).val()+",";
            productprice +=arr[i].productPrice +",";
        }
        productid = productid.substring(0, productid.length - 1);
        count = count.substring(0, count.length - 1);
        productprice = productprice.substring(0, productprice.length - 1);

        $.ajax({
            url:"../zsl/saveOrder",
            data:{productid:productid,count:count,productprice:productprice},
            type:"post",
            success:function(data){
                if(data){
                    location.href="../zsl/zhifuyemian?id="+productid;
                }else{
                    alert("请稍后重试")
                }
            }
        })
    }
</script>
</html>